<template>
  <div>
    <div class="card flex flex-row items-center">
      <UploadImage v-model="avatar" :show-file-list="false" @upload-success="handleUpload">
        <template #trigger>
          <div class="avatar-wrapper">
            <el-avatar :size="100" :src="userStore.userInfo.avatar || AVATAR_DEFAULT" />
            <div class="avatar-overlay">
              <span>修改头像</span>
            </div>
          </div>
        </template>
      </UploadImage>
      <div class="user ml-4">
        <div class="name font-bold text-[22px]">
          {{ userStore.userInfo.account }}
        </div>
        <div class="desc text-[#999] text-[14px]">欢迎回来，{{ userStore.userInfo.account }}</div>
      </div>
    </div>

    <div class="card mt-4">
      <div class="card-header">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="userinfo"></el-tab-pane>
          <el-tab-pane label="安全设置" name="password"></el-tab-pane>
          <el-tab-pane label="通知设置" name="notice"></el-tab-pane>
        </el-tabs>
      </div>
      <template v-if="activeName !== 'notice'">
        <el-form ref="ruleFormRef" label-width="auto" :model="form" :rules="rules" style="width: 400px; margin-top: 15px">
          <template v-if="activeName === 'userinfo'">
            <el-form-item label="用户名称" prop="account">
              <el-input v-model="form.account" placeholder="请输入用户名称" />
            </el-form-item>
            <el-form-item label="用户角色" prop="role_ids">
              <el-select v-model="form.role_ids" placeholder="请选择用户角色" multiple disabled>
                <el-option v-for="item in roleList" :key="item.id" :label="item.role_name" :value="item.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入手机号码" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" />
            </el-form-item>
          </template>
          <el-form-item
            v-if="activeName === 'password'"
            label="用户密码"
            prop="password"
            :rules="{
              required: true,
              message: '请输入用户密码',
              trigger: 'blur'
            }"
          >
            <el-input v-model="form.password" show-password placeholder="请输入用户密码" />
          </el-form-item>
          <el-form-item label-width="80px">
            <el-button type="primary" @click="confirmClick(ruleFormRef)">提交</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template v-else>
        <el-image :src="Update" class="w-[400px] h-[300px]" style="margin: auto"></el-image>
      </template>
    </div>
  </div>
</template>
<script setup lang="ts">
import type { FormInstance, FormRules } from "element-plus";
import { ElForm, ElMessage } from "element-plus";
import router from "@/routers";
import useUserStore from "@/stores/modules/user";
import * as Api from "@/api/modules/user";
import { ManagerData } from "@/api/modules/manager";
import { getRoleAll } from "@/api/modules/role";
import Update from "@/assets/images/update.png";
import { AVATAR_DEFAULT } from "@/config";
import { Md5 } from "ts-md5";

const userStore = useUserStore();

// 更换头像
const avatar = ref("");
const handleUpload = (url: string) => {
  form.value.avatar = url;
  confirmClick(ruleFormRef.value);
};

const activeName = ref("userinfo");
const handleClick = (tab: any) => {
  activeName.value = tab.paneName;
  if (activeName.value !== "notice") {
    form.value = JSON.parse(JSON.stringify(userStore.userInfo));
  }
};

const form = ref<ManagerData>(JSON.parse(JSON.stringify(userStore.userInfo)));
const ruleFormRef = ref<FormInstance>();
const rules = reactive<FormRules<ManagerData>>({
  account: { required: true, message: "请输入用户名称", trigger: "blur" },
  role_ids: { required: true, message: "请选择用户角色", trigger: "blur" }
});

const confirmClick = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (!valid) return;
    const params = { ...form.value };
    if (activeName.value === "password") {
      params.password = Md5.hashStr(form.value.password);
    }
    const res = await Api.editUserInfo(params);
    userStore.setUserInfo(res.data);
    ElMessage({
      message: res.message,
      type: "success"
    });
    if (form.value.password) {
      router.push("/login");
    }
  });
};

const roleList = ref([]);
const getRoleList = async () => {
  const { data } = await getRoleAll();
  roleList.value = data.list;
};

onMounted(() => {
  getRoleList();
});
</script>
<style lang="scss" scoped>
.user {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.avatar-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.avatar-overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  font-size: 12px;
  color: white;
  background-color: rgb(0 0 0 / 50%);
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.avatar-wrapper:hover .avatar-overlay {
  opacity: 1;
}
</style>
